<template>
	<view class="nbrw" @touchstart="startTouch" @touchend="endTouch">
		<u-tabs :list="list" :is-scroll="false" :current="current" count="count" @change="change"></u-tabs>
		<view>
			<view class="task_bg">
				<view class="task_one" v-for="(item, index) in taArr" @tap="details(item)" :key="index">
					<view class="task_content">
						<view class="states statesColor1" v-if="item.taskState == 0">
							未查看
						</view>
						<view class="states statesColor2" v-if="item.taskState == 1">
							未反馈
						</view>
						<view class="states statesColor3" v-if="item.taskState == 2">
							已反馈
						</view>
						<view class="states statesColor4" v-if="item.taskState == 3">
							逾期
						</view>
						<view class="states statesColor5" v-if="item.taskState == 4">
							完成
						</view>
						<view class="task_name">
							<!-- <view class="task_left">任务名称</view>
              <view class="task_right nameFont">{{ item.mainName }}</view> -->
							<view class="task_left">{{ item.mainName }}</view>
						</view>
						<view class="task_child">
							<view class="task_test">
								<!-- <view class="task_left">子事项名称</view> -->
								<!-- <view class="task_right childFont">{{ item.subName }}</view> -->
								<view class="task_left colorsubname">{{ item.subName }}</view>
								<!-- <view class="task_right childFont"></view> -->
							</view>
						</view>
						<view class="task_child task_childN">
							<view class="task_testN">
								<view class="task_leftN">派发人</view>
								<view class="task_rightN childFont">{{
                  item.createUserName
                }}</view>
							</view>
							<view class="task_testN">
								<view class="task_leftN">派发时间</view>
								<view class="task_rightN childFont">{{ item.createDate }}</view>
							</view>
						</view>
						<!-- <view class="task_child">
              <view class="task_test">
                <view class="task_left">承办人</view>
                <view class="task_right childFont">{{ item.userName }}</view>
              </view>
            </view> -->
						<view class="task_child task_childN">
							<view class="task_testN">
								<view class="task_leftN">承办人</view>
								<view class="task_rightN childFont">{{ item.userName }}</view>
							</view>
							<view class="task_testN">
								<view class="task_leftN">任务时限</view>
								<view class="task_rightN childFont">{{ item.remindDate }}</view>
							</view>
						</view>
						<!-- "mainTaskId": "20210430100000000125",
                        "subTaskId": "20210430100000000231",
                        "userId": "20191017100000001078",
                        "valids": 1,
                        "sysId": "20210430100000000387",
                        "taskState": "0",
                        "backType": "0",
                        "createUser": "20190916100000000828",
                        "timeRound": 1,
                        "subName": "188745",
                        "createUserName": "塘前乡",
                        "mainName": "129545",
                        "remindDate": "2021-04-30" -->
					</view>
				</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
	</view>
</template>

<script>
import { insideTaskList, insideChangstatue } from "../../../request/dcxt";
export default {
	data() {
		return {
			list: [
				{
					name: "未签收",
					count: 0,
					index: 0,
					number: 0,
				},
				{
					name: "未反馈",
					count: 0,
					index: 1,
					number: 1,
				},
				{
					name: "已反馈",
					count: 0,
					index: 2,
					number: 2,
				},
				{
					name: "我派发的",
					count: 0,
					index: 3,
					number: 9,
				},
				{
					name: "未完成",
					count: 0,
					index: 4,
					number: 11,
				},
				{
					name: "已完成",
					count: 0,
					index: 5,
					number: 4,
				},
				{
					name: "全部",
					count: 0,
					index: 6,
					number: 10,
				},
			],
			current: 0,
			currentN: 0,
			rwmc: "任务名称",
			rwnr: "任务内容",
			taArr: [],
			status: "loadmore",
			iconType: "flower",
			loadText: {
				loadmore: "轻轻上拉",
				loading: "努力加载中",
				nomore: "实在没有了",
			},
			pageSize: 10,
			currentPage: 1,
			startData: {
				clientX: "",
				clientY: "",
			},
		};
	},
	onShow() {
		this.current = 0;
		this.currentN = 0;
		uni.startPullDownRefresh();
	},
	onPullDownRefresh() {
		var _this = this;
		setTimeout(function () {
			_this.taArr = [];
			_this.getCount();
			_this.init(_this.currentN);
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		// 滑动
		startTouch(e) {
			this.startData.clientX = e.changedTouches[0].clientX;
		},
		endTouch(e) {
			const subX = e.changedTouches[0].clientX - this.startData.clientX;
			if (subX > 80) {
				if (this.current == 0) {
					this.current = 6;
				} else {
					this.current--;
				}
				this.change(this.current);
			} else if (subX < -80) {
				if (this.current == 6) {
					this.current = 0;
				} else {
					this.current++;
				}
				this.change(this.current);
			} else {
			}
		},
		//   切换
		change(index) {
			this.current = this.list[index].index;
			this.currentN = this.list[index].number;
			this.pageSize = 10;
			this.currentPage = 1;
			this.taArr = [];
			this.init(this.list[index].number);
		},
		getCount() {
			for (let i = 0; i < 2; i++) {
				insideTaskList({
					loginerId: uni.getStorageSync("loginId"),
					taskState: this.list[i].number,
				}).then((res) => {
					console.log(
						"res.data.data.total____" + res.data.data.total
					);
					if (!res.data.data.total) {
						this.$nextTick(() => {
							this.$set(this.list[i], "count", 0);
						});
					}
					if (res.data.data.total) {
						this.$nextTick(() => {
							this.$set(
								this.list[i],
								"count",
								res.data.data.total
							);
						});
						// this.list[i].count = res.data.data.total;
					}
				});
			}
		},
		init(index) {
			insideTaskList({
				loginerId: uni.getStorageSync("loginId"),
				taskState: index,
				paging: {
					pageSize: this.pageSize,
					currentPage: this.currentPage,
				},
			}).then((res) => {
				var result = res.data.data.list;
				console.log(res.data, "-=-=-=-=-=");
				if (!result || result.length < 10) {
					this.status = "nomore";
				} else {
					this.status = "loadmore";
				}
				if (res.data.data.list) {
					this.taArr.push(...res.data.data.list);
				}
			});
		},
		// 详情
		details(item) {
			insideChangstatue({
				sysId: item.sysId,
				loginerId: uni.getStorageSync("loginId"),
			}).then((res) => {
				console.log("danyanji");
				console.log(res);
			});
			var _this = this;

			console.log(item, "danyanji");
			uni.navigateTo({
				url: "/pages/dcxt/fktask/fktask?info=" + JSON.stringify(item),
			});
		},
	},
	onReachBottom() {
		this.status = "loading";
		setTimeout(() => {
			this.currentPage++;
			this.init(this.currentN);
		}, 2000);
	},
};
</script>

<style lang="scss" scoped>
.nbrw {
	width: 100%;
	min-height: 100vh;
	background: #f5f6fa;

	.task_bg {
		width: 95%;
		margin: 0 auto;
		margin-top: 60rpx;
		position: relative;

		.task_one {
			background-color: rgba(255, 255, 255, 1);
			position: relative;
			margin-bottom: 40rpx;
			box-shadow: 0px 0px 24rpx 0px rgba(48, 116, 255, 0.1);
			border-radius: 24rpx 8rpx 8rpx 8rpx;
			padding: 10rpx 24rpx 24rpx 24rpx;
		}

		.task_left_top {
			position: absolute;
			top: 0;
			left: 0;
			min-width: 252rpx;
			height: 48rpx;
			background: rgba(48, 116, 255, 0.2);
			border-radius: 24rpx;
			display: flex;
			align-items: center;

			.name {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #3074ff;
				padding: 0 20rpx;
			}

			.task_round {
				width: 48rpx;
				height: 48rpx;
				background: #3074ff;
				z-index: 5;
				box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		.task_content {
			width: 100%;
			margin-top: 20rpx;
			position: relative;

			.states {
				position: absolute;
				right: 0%;
				top: -16rpx;
			}
			.statesColor1 {
				color: rgb(252, 165, 4);
			}
			.statesColor2 {
				color: rgb(250, 45, 9);
			}
			.statesColor3 {
				color: rgb(8, 253, 61);
			}
			.statesColor4 {
				color: rgb(231, 247, 6);
			}
			.statesColor5 {
				color: rgb(44, 57, 252);
			}

			.task_btnArr {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-top: 40rpx;
			}

			.task_btn {
				background: #3074ff;
				border-radius: 4rpx;
				padding: 8rpx 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 20rpx;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}

				.more {
					width: 24rpx;
					height: 6rpx;
					margin-right: 10rpx;
				}

				.font {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.7);
				}
			}

			.task_name {
				display: flex;
				padding-bottom: 0rpx;
				margin: -10rpx 0;

				.task_left {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #272b32;
				}
			}

			.task_child {
				padding: 0 0;
				// border-top: 1rpx solid rgba(231, 233, 240, 1);
				// border-bottom: 1rpx solid rgba(231, 233, 240, 1);
			}

			.task_test {
				display: flex;
				margin: 15rpx 0;
			}

			.task_left {
				flex: 2;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #8e9cb3;
			}

			.nameFont {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #272b32;
			}

			.task_right {
				flex: 7;
				display: flex;
				align-items: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				.childFont {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #272b32;
				}

				.zt_type1 {
					margin-left: 10rpx;
					background: #f85f78;
					border-radius: 4rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.7);
					padding: 0 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.zt_type2 {
					margin-left: 10rpx;
					background: rgba(250, 173, 51, 1);
					border-radius: 4rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.7);
					padding: 0 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.colorsubname {
		color: #272b32 !important;
	}
	.task_childN {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
		.task_testN:nth-child(1) {
			flex: 1;
		}
		.task_testN:nth-child(2) {
			flex: 2;
			.task_rightN {
				width: 300rpx;
			}
		}
		.task_testN {
			display: flex;
			align-items: center;
			.task_leftN {
				width: 130rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #8e9cb3;
			}
			.task_rightN {
				width: 180rpx;
			}
		}
		view {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
</style>
